<!-- 油站详情 -->
<template>
	<view class="GasDetails" :class="{'pof' : loading}">
		<!-- 骨架部分 -->
		<view class="skeleton-section f5-background pof" v-if="loading">
			<view class="f-background section-rea margin-bottom-16">
				<u-skeleton :loading="loading" rows="3" :title="false" :rowsWidth="['396rpx','494rpx','116rpx']"
					:rowsHeight="['32rpx','60rpx','40rpx']"></u-skeleton>
				<view class="margin-bottom-16"></view>
				<view class="dis-cen">
					<u-skeleton :loading="loading" rows="1" :title="false" :rowsWidth="['400rpx']"
						:rowsHeight="['36rpx']"></u-skeleton>
					<view>
						<u-skeleton :loading="loading" rows="1" :title="false" :rowsWidth="['152rpx']"
							:rowsHeight="['62rpx']"></u-skeleton>
					</view>
				</view>
			</view>
			<view class="f-background section-rea margin-bottom-16">
				<view class="dis-cen margin-bottom-16">
					<u-skeleton :loading="loading" rows="1" :title="false" :rowsWidth="['208rpx']"
						:rowsHeight="['32rpx']"></u-skeleton>
					<view>
						<u-skeleton :loading="loading" rows="1" :title="false" :rowsWidth="['124rpx']"
							:rowsHeight="['52rpx']"></u-skeleton>
					</view>
				</view>
				<u-skeleton :loading="loading" rows="3" :title="false" :rowsWidth="['660rpx','660rpx','456rpx']"
					:rowsHeight="['84rpx','84rpx','84rpx']"></u-skeleton>
			</view>
			<view class="f-background section-rea margin-bottom-16">
				<u-skeleton :loading="loading" rows="5" :title="false"
					:rowsWidth="['660rpx','660rpx','660rpx','660rpx','660rpx']"
					:rowsHeight="['112rpx','100rpx','28rpx','28rpx','28rpx']"></u-skeleton>
			</view>
		</view>
		<!-- 油站信息 -->
		<view class="gas-info margin-bottom-16 f-background">
			<view class="details border-bottom">
				<view>
					<view class="font-weight-600 color2 size-36">{{ionIfon.stationsName || '-'}}</view>
					<view class="station-prices font-weight-600">
						<text class="first color size-50">{{ionIfon.oilVos[oilInex].discountPrice|| 0}}</text>
						<text class="color2 size-26">元</text>
						<text class="yzj size-24">油站价{{ionIfon.oilVos[oilInex].stationPrice || 0}}元</text>
						<text class="yzj size-24">国标价{{ionIfon.oilVos[oilInex].countryPrice || 0}}元</text>
					</view>
					<view class="invoicing font-weight-400 size-24 dis">油站开票</view>
				</view>
				<u--image width="96rpx" height="96rpx" radius="8rpx" :src="ionIfon.stationPic">
					<view slot="error" style="font-size: 24rpx;">加载失败</view>
				</u--image>
			</view>
			<view class="address dis-cen">
				<view class="addr font-weight-400 color2 size-28">{{ionIfon.location}}</view>
				<view class="navigation dis radius100 border" @click="onNavigationGo(ionIfon)">
					<!-- <image class="nav-icon" src="@/static/icons/dh.png" mode=""></image> -->
					<text class="font-weight-600 color size-24">{{ionIfon.distance}}km</text>
				</view>
			</view>
		</view>
		<!-- 选择油枪 -->
		<view class="oilgun margin-bottom-16 f-background por" v-if="!loading">
			<view class="select-title dis-cen">
				<view class="font-weight-600 color0 size-32">选择油汽号/枪号</view>
				<view class="car-number dis" @click="gunShow=true">
					<text class="font-weight-600 color0 size-32">{{ionIfon.oilVos[oilInex].code}}</text>
					<text class="iconfont icon-xiala color2"></text>
				</view>
			</view>
			<view class="oilgun-hao" :class="{'all-height':!allBool}">
				<view class="hao dis" :class="{'backgrounds border' : params.gunCode == items}"
					v-for="(items,index) in ionIfon.oilVos[oilInex].oilGuns" :key="index" @click="onGunCode(items)">
					<text class="font-weight-600 color0 size-44">{{items}}</text>
					<text class="font-weight-400 color0 size-24">号</text>
				</view>
			</view>
			<view class="all font-weight-400 color8 size-28 dis" @click="allBool=true"
				v-if="!allBool && ionIfon.oilVos[oilInex].oilGuns.length>8">查看全部</view>
		</view>
		<!-- 输入框 -->
		<view class="choose margin-bottom-16 f-background">
			<view class="select">
				<!-- <view class="font-weight-600 color0 size-32">加油金额</view> -->
				<view class="price-dis dis-ali" :class="{'board border':!boardShow && !amount}" @click="onCheerOn">
					<view class="font-weight-400 color2 size-36" v-if="boardShow || amount">￥</view>
					<view class="dis-ali">
						<view class="font-weight-600 color size-36" v-if="!boardShow && !amount">输入金额 实时计算优惠</view>
						<view class="font-weight-600 color2 size-60 dis-ali" :class="amount? 'color0':'color8'" v-else>
							{{amount || ''}}
						</view>
						<view class="price-back animation-name" v-if="boardShow || amount"></view>
					</view>
				</view>
				<view class="discount">
					<view class="discount-for text-align dis" :class="{'border' : disIndex == index}"
						@click="onDiscount(index)" v-for="(item,index) in ionIfon.oilVos[oilInex].discounts"
						:key="index">
						<view class="font-weight-600 color2 size-40">
							{{item.amount}}<text class="size-24">元</text>
						</view>
						<view class="font-weight-400 color size-24">优惠{{item.discount}}元</view>
					</view>
				</view>
			</view>
			<view class="dis-cen" @click="modalShow=true">
				<view class="font-weight-400 color2 size-28 dis-ali">
					<text>便利豆</text>
					<image class="beans-icon" src="@/static/icons/prompt.png" mode=""></image>
				</view>
				<view class="color size-30" v-if="amountTo.payAmount">
					<text class="font-weight-600 size-36">-{{amountTo.bean || 0}}</text>豆
				</view>
				<view class="beans" v-else>
					<text class="color font-weight-400 size-28">可用{{ionIfon.bean || 0}}豆</text>
				</view>
			</view>
			<view class="dis-cen">
				<view class="font-weight-400 color2 size-28">直降优惠</view>
				<view class="color size-30" v-if="amountTo.payAmount">
					<text class="font-weight-600 size-36">-{{amountTo.discount||0}}</text>豆
				</view>
				<text class="font-weight-400 color9 size-28" v-else>输入金额后查看直降优惠</text>
			</view>
			<view class="dis-cen">
				<view class="font-weight-400 color2 size-28">服务费</view>
				<view class="font-weight-400 color2 size-30">
					<text class="font-weight-600 color2 size-38">{{amountTo.serviceFee||0}}</text>元
				</view>
			</view>
		</view>
		<view class="service font-weight-400 size-26 text-align">本服务由领火饭票服务商提供</view>
		<view class="inset-bottom"></view>
		<!-- 底部按钮 -->
		<view class="bottom-button pof f-background" v-if="tokenBool">
			<view class="bottom dis-cen">
				<view class="color">
					<view class="font-weight-600 size-60">{{amountTo.payAmount || 0}}<text class="size-30">元</text>
					</view>
					<view class="already font-weight-400 size-24" v-if="amountTo.payAmount">
						已优惠{{amountTo.discount*1 + amountTo.beanAmount*1}}元</view>
				</view>
				<u-button type="primary"
					:customStyle="{width: '292rpx',height: '112rpx',borderRadius: '100rpx',margin: 0}" color="#FF1E1E"
					@click="onGoPay">
					<text class="color-f font-weight-600 size-32">去支付</text>
				</u-button>
			</view>
			<view class="inset-bottom"></view>
		</view>
		<!-- 登录 -->
		<view class="logon pof f5-background" v-else>
			<u-button type="primary" :customStyle="{width: '702rpx',height: '84rpx',borderRadius: '8rpx',margin: 0}"
				color="#FF1E1E" @click="onSaveName">
				<text class="color-f font-weight-600 size-32">登录后享加油优惠</text>
			</u-button>
			<view class="inset-bottom"></view>
		</view>
		<!-- 键盘 -->
		<u-popup :show="boardShow" @close="boardShow=false,amountTo = !amount ? {} : amountTo"
			:overlayStyle="{background: 'rgba(3, 100, 219, 0)'}">
			<keyboard @inputPrice="onInputPrice" :orderAmt="amount" />
		</u-popup>
		<!-- 选择油号/枪号 -->
		<u-popup :show="gunShow" @close="gunShow=false" round="30rpx">
			<view class="gun-popup dis por">
				<view class="font-weight-600 color0 size-36">选择油号/枪号</view>
				<text class="iconfont icon-guanbi size-50 poa" @click="gunShow=false"></text>
			</view>
			<scroll-view :scroll-y="true" class="popup-gun">
				<view class="font-weight-600 color0 size-32">油号</view>
				<view class="oilgun-hao margin-oilgun">
					<view class="hao dis" :class="{'backgrounds border' : item.code == params.code}"
						v-for="(item,index) in ionIfon.oilVos" :key="index"
						@click="onSelectOilNumber(item,index),allBool=false">
						<text class="font-weight-600 color0 size-44">{{item.code}}</text>
					</view>
				</view>
				<view class="font-weight-600 color0 size-32">枪号</view>
				<view class="oilgun-hao">
					<view class="hao dis" :class="{'backgrounds border' : res == params.gunCode}"
						v-for="(res,inx) in ionIfon.oilVos[oilInex].oilGuns" :key="inx" @click="onGunCode(res)">
						<text class="font-weight-600 color0 size-44">{{res}}</text>
						<text class="font-weight-400 color0 size-24">号</text>
					</view>
				</view>
			</scroll-view>
		</u-popup>
		<u-modal :show="modalShow" closeOnClickOverlay @close="modalShow=false" @confirm="modalShow=false"
			confirmText="我知道啦!" confirmColor="#FF0000" title="便利豆说明"
			:content='`用户可通过消费或参与平台活动(如签到)获取便利豆。便利豆可用于抵扣代取快递、社区团购配送费和油费，抵扣油费时每个订单最多抵扣${ionIfon.bean}豆。`'></u-modal>
	</view>
</template>

<script>
	const url = {
		paymentResults: '/packageGas/payment-results/payment-results', // 支付成功
	}
	import keyboard from '@/components/keyboard/keyboard'
	import { GetInfoByStations, SumAmount } from "@/api/index"
	export default {
		components: { keyboard },
		data() {
			return {
				modalShow: false,
				allBool: false,
				loading: true,
				gunShow: false,
				boardShow: false,
				amount: '', // 输入的金额
				tokenBool: '',
				oilInex: 0,
				ionIfon: {},
				disIndex: -1, // 优惠卡片选择,
				params: {
					gunCode: '', // 抢号
				},
				amountTo: {}, // 输入金额的合计 
			}
		},
		onShow() {
			this.tokenBool = uni.getStorageSync('userInfo').mobile
		},
		onLoad(options) {
			const location = uni.getStorageSync('location')
			this.params = { ...options, ...location }
			this.postGetInfoByStations()
		},
		methods: {
			// 油站信息
			async postGetInfoByStations() {
				const { code, data } = await GetInfoByStations(this.params)
				if (code == '200') {
					console.log('data', data)
					data.oilVos.map((res, inx) => {
						console.log('res.code', res.code, this.params.code)
						if (res.code == this.params.code) this.oilInex = inx
					})
					this.ionIfon = data
					const _this = this
					setTimeout(() => {
						_this.loading = false
					}, 600)
				}
			},
			// 计算
			async postSumAmount() {
				if (!this.params.code) return
				const param = {
					amount: this.amount,
					stationsId: this.params.stationsId,
					code: this.params.code
				}
				const { code, data } = await SumAmount(param)
				if (code == '200') {
					this.amountTo = data
					console.log('data', data)
				}
			},
			// 选择油号
			onSelectOilNumber(item, index) {
				this.params.code = item.code
				this.oilInex = index
				this.params.gunCode = ''
				this.postSumAmount()
			},
			// 选择抢号
			onGunCode(res) {
				this.$set(this.params, 'gunCode', res)
				this.gunShow = false
				if (!this.amount) return
				this.postSumAmount()
			},
			// 导航前往
			onNavigationGo(res) {
				uni.openLocation({
					latitude: res.latitude,
					longitude: res.longitude,
					name: res.stationsName,
					address: res.location,
					success: function() {
						console.log('success');
					}
				});
			},
			// 选择优惠的模块
			onDiscount(index) {
				this.disIndex = index
				this.amount = this.ionIfon.oilVos[this.oilInex].discounts[index].amount
				this.postSumAmount()
			},
			// 键盘事件
			onInputPrice(e) {
				console.log(e)
				if (e.key == 'verify') {
					let tis = ''
					if (this.amount < 1) tis = "金额不能小于1"
					else if (this.amount > 1200) tis = '金额不能大于1200'
					if (tis) {
						this.showToast(tis)
						return
					}
					this.boardShow = false
					this.postSumAmount()
				} else {
					this.amount = e.amount
				}
				this.disIndex = -1
			},
			showToast(name, icon) {
				uni.showToast({
					title: name,
					duration: 2000,
					icon: icon || 'none'
				});
			},
			// 点击输入的时候掉起键盘
			onCheerOn() {
				this.boardShow = true
				uni.pageScrollTo({
					scrollTop: 150, // 注意：在某些平台上可能不支持  
					duration: 0 // 滚动动画时长  
				});
			},
			onGoPay() {
				let tis = ''
				if (!this.amount) tis = "请输入金额！"
				else if (!this.params.gunCode) tis = '请选择抢号'
				if (tis) {
					this.showToast(tis)
					return
				}
				this.onJumpPage('paymentResults')
			},
			onJumpPage(name, parName, par) {
				let urlData = url[name]
				if (par) urlData = `${urlData}?${parName}=${par}` // 有参数
				if (!this.tokenBool) urlData = '/packagePerson/logon/logon' // 未登录
				if (name == 'paymentResults') {
					uni.redirectTo({
						url: urlData
					});
					return
				}
				uni.navigateTo({
					url: urlData
				});
			},
		}
	}
</script>

<style lang="scss">
	.GasDetails {
		padding: 16rpx 16rpx 160rpx;
		box-sizing: border-box;
		width: 100%;

		// 登录
		.logon {
			left: 0;
			bottom: 0;
			z-index: 100;
			padding: 32rpx 24rpx;
		}

		.beans-icon {
			width: 28rpx;
			height: 28rpx;
			margin-left: 4rpx;
		}

		// 油站信息
		.gas-info {
			border-radius: 24rpx;

			.details {
				display: flex;
				justify-content: space-between;
				padding: 40rpx 32rpx 44rpx 30rpx;

				.station-prices {
					margin: 28rpx 0 20rpx;
				}

				.invoicing {
					width: 116rpx;
					height: 40rpx;
					border-radius: 8rpx;
					border: 1px solid #BDC4CB;
					color: #9C9C9C;
				}
			}

			.address {
				padding: 32rpx 20rpx 42rpx 30rpx;

				.addr {
					width: 490rpx;
				}

				.navigation {
					padding: 18rpx 23rpx;

					.nav-icon {
						width: 20rpx;
						height: 20rpx;
						margin-right: 10rpx;
					}
				}
			}
		}

		// 选择油枪
		.oilgun {
			border-radius: 24rpx;
			padding: 31rpx 28rpx;
			overflow: hidden;

			.icon-xiala {
				margin-left: 4rpx;
			}

			.all {
				height: 60rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				background: #ffffff;
			}

			.all-height {
				max-height: 230rpx;
			}

			.select-title {
				margin-bottom: 26rpx;
			}

			.car-number {
				// height: 52rpx;
				border-radius: 60rpx;
				border: 1px solid #EEEEEE;
				padding: 10rpx 28rpx;
			}
		}

		// 输入框
		.choose {
			border-radius: 24rpx;
			padding: 32rpx 28rpx 36rpx;
			display: grid;
			grid-gap: 40rpx 0;

			.beans {
				background: #FFEDED;
				padding: 6rpx 10rpx;
				border-radius: 8rpx;
			}

			.select {
				display: grid;
				grid-gap: 25rpx 0;

				.icon-xiala {
					margin-left: 8rpx;
				}
			}

			.discount {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				grid-gap: 0 24rpx;

				.discount-for {
					background: #F7F7F7;
					height: 100rpx;
					flex-direction: column;
					box-sizing: border-box;
					border: 1px solid #F7F7F7;

					.font-weight-600 {
						margin-bottom: 8rpx;
					}
				}
			}
		}

		// 页尾
		.service {
			color: #B2B2B2;
			padding: 56rpx 0 58rpx;
		}

		// 输入框部分
		// 跳转线
		.price-back {
			width: 2px;
			height: 60rpx;
			// margin-left: 10rpx;
		}

		.animation-name {
			animation-name: move;
			animation-duration: 1.2s;
			background: #EB0000;
			animation-iteration-count: infinite;
		}

		@keyframes move {
			0% {
				opacity: 0;
			}

			100% {
				opacity: 1;
			}
		}

		// 输入框样式
		.price-dis {
			width: 100%;
			height: 112rpx;
			box-sizing: border-box;
			background: #F7F7F7;
			border: 1px solid #F7F7F7;
			border-radius: 14rpx;
			padding: 0 36rpx;
		}

		.board {
			background: #FFE8E9;
		}

		// 底部按钮
		.bottom-button {
			width: 100%;
			left: 0;
			bottom: 0;

			.bottom {
				height: 160rpx;
				padding: 0 40rpx 0 48rpx;
			}

			.already {
				margin-top: 8rpx;
			}
		}

		// 选择油号/枪号
		.oilgun-hao {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 20rpx;

			.hao {
				background: #F7F7F7;
				border: 1px solid #F7F7F7;
				height: 84rpx;
				border-radius: 16rpx;
			}
		}

		.gun-popup {
			padding: 40rpx;

			.icon-guanbi {
				top: 35rpx;
				right: 40rpx;
			}

			// display: grid;
			// grid-template-columns: repeat(3,33.33%);
		}

		.popup-gun {
			height: 50vh;
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;

			.size-32 {
				margin-bottom: 30rpx;
			}

			.margin-oilgun {
				margin-bottom: 50rpx;
			}
		}
		.dians{
			width: 20rpx;
			height: 20rpx;
			z-index: 10;
		}
		// 骨架部分
		.skeleton-section {
			width: 100vw;
			height: 100vh;
			z-index: 10000;
			box-sizing: border-box;
			padding: 16rpx;
			left: 0;
			top: 0;

			.section-rea {
				border-radius: 24rpx;
				padding: 42rpx 30rpx;
			}
		}
	}
</style>